<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <box gap="10px">
      <div class="flex-box">
        <div v-for="(item, index) in list" :key="index" @click="$router.push('/teachers/' + item.id)">
          <img :src="item.avatar" v-if="item.avatar && item.avatar.indexOf('http:') !== -1">
          <img :src="$apiUrl + '/storage/' + item.avatar" v-else>
          <p>{{item.name}}</p>
        </div>
      </div>
    </box>
     <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
      <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
      <empty slot="no-results" tips="暂时没有相关教师"></empty>
    </infinite-loading>
  </view-box>
</template>
<script>
  import { ViewBox, Box } from 'vux'
  export default {
    data () {
      return {
        list: [],
        category: 0
      }
    },
    components: {
      ViewBox,
      Box
    },
    mounted () {
      this.category = this.$route.query.category_id ? this.$route.query.category_id : 0
    },
    methods: {
      infiniteHandler ($state) {
        this.$http.get('/users?role=Teacher&page_size=20&category_id=' + this.category, {
          params: {
            page: this.list.length / 20 + 1,
            page_size: 20
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.list = this.list.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      width: 49%;
      position: relative;
      img {
        width: 100%;
      }
      p {
        position: absolute;
        bottom: 20px;
        left: 0;
        background: rgba(0,0,0,.8);
        color: #dcc59e;
        line-height: 14px;
        font-size: 14px;
        padding: 5px 12px;
      }
    }
  }
</style>